/**
 * 〈所属模块〉
 * 〈功能描述〉
 *
 * @author Lcs
 * @date 2017/9/15 13:27
 */

import React, { Component } from "react";
import {
  StyleSheet, Text, View, ScrollView, Image,
} from "react-native";
import { connect } from "react-redux"; // 引入connect函数
import LinearGradient from "react-native-linear-gradient";

import FastImage from "react-native-fast-image";
import {
  Color, ScreenWidth, FontSize, scale,
} from "../common";
import NavigatorUtil from "../utils/NavigatorUtil";
import HolderImage from "../widget/common/HolderImage";
import BasePage from "../widget/common/BasePage";
import * as serviceInfoAction from "../actions/serviceInfoAction"; // 导入action方法
import NetWorkUtil from "../utils/NetWorkUtil";
import ChooseItem from "../widget/common/ChooseItem";
import NCButton from "../widget/common/NCButton";
import TagGroup from "../widget/common/TagGroup";
import { isEmpty } from "../utils/utils";

class ServiceInfo extends Component {
  componentWillMount() {
    const { props } = this;
    const serviceItem = NavigatorUtil.getPageParam(props, "serviceItem");
    props.dispatch(serviceInfoAction.init(serviceItem));
  }

  componentWillUnmount() {
    const { props } = this;
    props.dispatch(serviceInfoAction.serviceInfoUnmount());
  }

  renderHeader() {
    const { serviceInfoReducer } = this.props;
    const { serviceInfo } = serviceInfoReducer;
    return (
      <View style={styles.headerConatiner}>
        <View style={styles.userHeaderConatiner}>
          {serviceInfo.length > 0 && (
            <HolderImage
              style={styles.flex}
              resizeMode="stretch"
              source={{ uri: NetWorkUtil.getFileUrl(serviceInfo[0].service_src) }}
            />
          )}
          {serviceInfo.length > 0 && (
            <LinearGradient
              style={styles.imgDescContainer}
              colors={["rgba(0,0,0,0)", "rgba(0,0,0,0.2)", "rgba(0,0,0,0.5)"]}
            >
              <Text numberOfLines={2} style={styles.textImgDesc}>
                {serviceInfo[0].service_description}
              </Text>
            </LinearGradient>
          )}
        </View>
        <View style={styles.rowContainer}>
          <View style={styles.descItem}>
            <HolderImage source={require("../img/ic_desc_tag.png")} style={styles.imgDescItem} />
            <Text style={styles.textDescItem}>系统安全保障</Text>
          </View>
          <View style={styles.descItem}>
            <HolderImage source={require("../img/ic_desc_tag.png")} style={styles.imgDescItem} />
            <Text style={styles.textDescItem}>极致用户体验</Text>
          </View>
          <View style={styles.descItem}>
            <HolderImage source={require("../img/ic_desc_tag.png")} style={styles.imgDescItem} />
            <Text style={styles.textDescItem}>24h极速到账</Text>
          </View>
        </View>
      </View>
    );
  }

  renderServiceWay() {
    const { props } = this;
    const { serviceInfoReducer } = props;
    const { serviceInfo } = serviceInfoReducer;
    return (
      <View>
        <View style={styles.serviceWayContainer}>
          <Text style={styles.textServiceWay}>维修方案</Text>
          <HolderImage source={require("../img/ic_help_gray.png")} style={styles.imgHelp} />
        </View>
        <TagGroup
          data={serviceInfo}
          keyName="service_way"
          onChange={d => props.dispatch(serviceInfoAction.changeServiceWay(d))}
          valueName="index"
        />
      </View>
    );
  }

  renderImageInfo() {
    const { serviceInfoReducer } = this.props;
    const { imageList } = serviceInfoReducer;
    for (let i = 0; i < imageList.length; i += 1) {
      Image.getSize(NetWorkUtil.getFileUrl(imageList[i]), (width, height) => {
        this[`image${i}`]
          && this[`image${i}`].setNativeProps({
            style: {
              height: (ScreenWidth / width) * height,
            },
          });
      });
    }
    return (
      <View style={styles.imagesContainer}>
        <Text style={styles.textImagesName}>详情介绍</Text>
        {imageList.map((item, index) => {
          return (
            <FastImage
              source={{ uri: NetWorkUtil.getFileUrl(item) }}
              style={styles.image}
              key={String(index)}
              ref={c => (this[`image${index}`] = c)}
            />
          );
        })}
      </View>
    );
  }

  handleChooseDeviceModel() {
    const { props } = this;
    const { serviceInfoReducer } = this.props;
    const { serviceId } = serviceInfoReducer;
    NavigatorUtil.goDeviceModelWithCallBack(serviceItem => {
      props.dispatch(serviceInfoAction.serviceInfoChangeDeviceModel(serviceItem, serviceId));
    });
  }

  handleNext() {
    const { serviceInfoReducer } = this.props;
    const { serviceInfo, curServiceWayIndex } = serviceInfoReducer;
    const { facility_id, service_id } = serviceInfo[0];
    const { service_price_id } = serviceInfo[curServiceWayIndex];
    NavigatorUtil.goServicePlaceOrder({ facility_id, service_id, service_price_id });
  }

  render() {
    const { serviceInfoReducer } = this.props;
    const {
      serviceInfo, initing, curServiceWayIndex, serviceItem,
    } = serviceInfoReducer;
    const shouldRender = serviceInfo.length > 0;
    const curServiceInfo = serviceInfo[curServiceWayIndex];
    const price = curServiceInfo ? curServiceInfo.make_price : "0.00";
    return (
      <BasePage style={styles.container} showIniting={initing}>
        <ScrollView>
          {this.renderHeader()}
          {shouldRender && (
            <ChooseItem
              onPress={() => {
                this.handleChooseDeviceModel();
              }}
              title="维修机型"
              desc={`${isEmpty(serviceItem.brand_name) ? "" : serviceItem.brand_name}  ${serviceItem.facility_name}`}
            />
          )}
          <View style={styles.divider} />
          {this.renderServiceWay()}
          {this.renderImageInfo()}
        </ScrollView>
        <View style={styles.bottomConatiner}>
          <Text style={styles.textPriceName}>
            金额：<Text style={styles.textPrice}>{price}</Text>{" "}
          </Text>
          <NCButton
            buttonStyle={styles.button}
            textStyle={styles.buttonText}
            title="下一步"
            onPress={() => this.handleNext()}
          />
        </View>
      </BasePage>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Color.white,
    alignItems: "center",
  },
  flex: {
    flex: 1,
  },
  divider: {
    backgroundColor: Color.divider_secondary,
    height: StyleSheet.hairlineWidth,
    width: ScreenWidth - 32 * scale,
    marginLeft: 16 * scale,
  },
  textImgDesc: {
    fontSize: FontSize.SIZE_14,
    color: Color.white,
  },
  imgDescContainer: {
    width: ScreenWidth,
    height: scale * 62,
    paddingHorizontal: scale * 16,
    paddingBottom: scale * 12,
    position: "absolute",
    bottom: 0,
    justifyContent: "flex-end",
  },
  rowContainer: {
    marginTop: scale * 16,
    paddingHorizontal: scale * 16,
    flexDirection: "row",
    width: ScreenWidth,
    justifyContent: "space-between",
  },
  spaceBetween: {
    flex: 1,
    paddingHorizontal: scale * 45,
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },
  headerConatiner: {
    width: ScreenWidth,
    marginBottom: scale * 24,
  },
  userHeaderConatiner: {
    height: scale * 210,
    width: ScreenWidth,
  },
  subTitle: {
    fontSize: FontSize.SIZE_17,
    color: Color.text_title,
    fontWeight: "bold",
    marginLeft: scale * 18,
    marginTop: scale * 16,
    marginBottom: scale * 15,
  },
  descItem: {
    flexDirection: "row",
    alignItems: "center",
  },
  imgDescItem: {
    width: 16 * scale,
    height: 16 * scale,
  },
  textDescItem: {
    color: Color.text_desc,
    fontSize: FontSize.SIZE_12,
    marginLeft: scale * 5,
  },
  textServiceWay: {
    color: Color.text_assist,
    fontSize: FontSize.SIZE_14,
  },
  serviceWayContainer: {
    flexDirection: "row",
    alignItems: "center",
    height: scale * 32,
    justifyContent: "space-between",
    paddingHorizontal: 16 * scale,
    marginTop: scale * 8,
  },
  imgHelp: {
    width: 24 * scale,
    height: 24 * scale,
  },
  imagesContainer: {
    width: ScreenWidth,
    alignItems: "center",
    paddingVertical: scale * 32,
  },
  textImagesName: {
    color: Color.desc,
    fontSize: FontSize.SIZE_14,
    marginBottom: scale * 8,
  },
  image: {
    width: ScreenWidth,
  },
  bottomConatiner: {
    width: ScreenWidth,
    height: scale * 48,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
  },
  buttonText: {
    fontSize: FontSize.SIZE_18,
    color: Color.text_title,
  },
  button: {
    width: scale * 125,
    height: scale * 48,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: Color.bg_selected,
    borderWidth: 0,
    borderRadius: 0,
    margin: 0,
  },
  textPriceName: {
    fontSize: FontSize.SIZE_14,
    color: Color.text_assist,
    marginLeft: scale * 32,
  },
  textPrice: {
    fontSize: FontSize.SIZE_16,
    color: Color.text_price,
    fontWeight: "bold",
  },
});

const reducers = state => {
  return {
    serviceInfoReducer: state.serviceInfoReducer,
  };
};

export default connect(reducers)(ServiceInfo);
